<template>
  <el-container class="workcontentContainer">
    <div class="exit">
      <Exit />
    </div>
    <div class="content">
      <div class="mod1">
        <el-row :gutter="20">
          <el-col :span="9">
            <img class="img" src="../../assets/img/hello.png">
          </el-col>
          <el-col :span="15">
            <div class="card_content">
              <CommonCard img-src="img1.png" title="设备列表" />
              <CommonCard img-src="img1.png" title="设备列表" />
              <CommonCard img-src="img1.png" title="设备列表" />
              <CommonCard img-src="img1.png" title="设备列表" />
              <CommonCard img-src="img1.png" title="设备列表" />
              <CommonCard img-src="img1.png" title="设备列表" />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mod2">
        <el-row :gutter="20">
          <el-col :span="13">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <template slot="title">
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <span class="des_title">每日添加设备折线图</span>
                  </el-tooltip>
                </template>
                <template slot="extra">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-select placeholder="本账号" size="small">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="12">
                      <el-select placeholder="近七天" size="small">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </template>
              </el-descriptions>
              <div class="chart1">
                <AddDeviceChart />
              </div>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="1" :size="size" border>
                <template slot="title">
                  <el-tooltip class="item" effect="dark" content="设备离线状态(超过24小时未上线设备)" placement="bottom">
                    <span class="des_title" style="cursor: pointer;">设备离线状态</span>
                  </el-tooltip>
                </template>
              </el-descriptions>
              <div class="table" style="width: 99%;">
                <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="100%">
                  <el-table-column prop="eliminatedStatus" label="用户名" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="序列号" align="center">
                  </el-table-column>
                  <el-table-column prop="state" label="添加日期" align="center">
                  </el-table-column>
                  <el-table-column prop="state" label="最后通讯时间" align="center">
                  </el-table-column>
                </el-table>
              </div>
              <el-pagination  @current-change="handleCurrentChange"
                :current-page="pageData.page" :page-size="pageData.pageSize"
                layout="total, prev, pager, next" :total="400">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mod3">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="1" :size="size" border>
                <template slot="title">
                  <span class="des_title" style="cursor: pointer;">丢失设备占比</span>
                </template>
              </el-descriptions>
              <div class="chart1">
                <LostDeviceChart />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <template slot="title">
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <span class="des_title">离线设备占比</span>
                  </el-tooltip>
                </template>
                <template slot="extra">
                  <el-select placeholder="近12小时" size="small">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </template>
              </el-descriptions>
              <div class="chart1">
                <LeaveDeviceChart />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <template slot="title">
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <span class="des_title">每月添加设备</span>
                  </el-tooltip>
                </template>
                <template slot="extra">
                  <el-select placeholder="本账号" size="small">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </template>
              </el-descriptions>
              <div class="chart1">
                <AddDeviceByMounthChart />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mod4">
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="1" :size="size" border>
                <template slot="title">
                  <span class="des_title">公告</span>
                </template>
              </el-descriptions>
              <div class="chart1">
                <ul class="ul_style">
                  <li class="notice" v-for="item in num">
                    <div class="left">
                      <el-row :gutter="2" class="row">
                        <el-col :span="4">
                          <el-tag color="#ebf1ff" size="small" style="color: #3370ff;">公告通知</el-tag>
                        </el-col>
                        <el-col :span="17">
                          <span style="display: inline-block;">MDM系统3月18日更新公告</span>
                        </el-col>
                      </el-row>
                    </div>
                    <span class="right">2024-03-18 10:02:03</span>
                  </li>
                </ul>
              </div>
              <el-pagination  @current-change="handleCurrentChange"
                :current-page="pageData.page"  :page-size="pageData.pageSize"
                layout="total, prev, pager, next" :total="400">
              </el-pagination>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="mukuai">
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <template slot="title">
                  <span class="des_title">常见问题&解决方案</span>
                </template>
                <template slot="extra">
                  <el-input size="small" placeholder="请输入常见问题标题" />
                </template>
              </el-descriptions>
              <div class="chart1">
                <ul class="ul_style">
                  <li class="notice qus" v-for="item in num">
                    <div class="left">
                      <el-row :gutter="2" class="row">
                        <el-col :span="1">
                          <span class="yuan"></span>
                        </el-col>
                        <el-col :span="17">
                          <span style="display: inline-block;">MDM系统3月18日更新公告</span>
                        </el-col>
                      </el-row>
                    </div>
                    <span class="right">2024-03-18 10:02:03</span>
                  </li>
                </ul>
              </div>
              <el-pagination  @current-change="handleCurrentChange"
                :current-page="pageData.page"  :page-size="pageData.pageSize"
                layout="total, prev, pager, next" :total="400">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

  </el-container>
</template>

<script>
import CommonCard from '../components/CommonCard.vue';
import CommonValueStyle from '../components/CommonValueStyle.vue'
import Exit from '../components/Exit.vue';
import AddDeviceChart from '../../chart/AddDeviceChart.vue'
import LostDeviceChart from '../../chart/LostDeviceChart.vue'
import LeaveDeviceChart from '../../chart/LeaveDeviceChart.vue'
import AddDeviceByMounthChart from '../../chart/AddDeviceByMounthChart.vue'

export default {
  components: { CommonValueStyle, Exit, CommonCard, AddDeviceChart, LostDeviceChart, LeaveDeviceChart, AddDeviceByMounthChart },
  data: function () {
    return {
      formQuery: {},
      activeName: 'first',
      formQuery: {},
      headerRowStyle2: {
        'backgroundColor': '#f8f8f9',
        'color': '#515a6e'
      },
      num: 6,
      size:'small',
      tableData:[],
      pageData:{
        page:1,
        pageSize:10
      }
    }
  },
  mounted() {
  },
  methods: {

    openRecordDialog() {
      // 通过 $refs 访问子组件实例，并调用 openDialog 方法打开弹出框
      this.$refs.recordModal.openDialog()
    },
    handleChildEvent(childMessage) {
      // 处理子组件传递的事件和参数
      console.log('Received message from child:', childMessage)
      // 可以在这里执行其他逻辑或更新父组件的数据
    },
    handleCurrentChange(){

    }
  }
}
</script>

<style scoped>
.workcontentContainer {
  padding-left: .125rem;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  background-color: #f0f2f5;

}

.exit {
  display: flex;
  justify-content: flex-end;
}

.content {
  width: 100%;
  padding: 0 .25rem .25rem 0;
}

.mod1 {
  width: 100%;
  height: 2.5rem;
  margin-bottom: .25rem;
}

.mod2 {
  width: 100%;
  height: 5rem;
  margin-bottom: .25rem;
}

.mod3 {
  width: 100%;
  height: 5rem;
  margin-bottom: .25rem;
}

.mod4 {
  width: 100%;
  height: 5rem;
  margin-bottom: .25rem;
}

.img {
  height: 2.5rem;
  width: 100%;
  background-image: url('../../assets/img/hello.png');
  background-size: cover;
  z-index: 999;
}

.card_content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.addDevice {
  width: 100%;
  height: 5rem;
  background-color: #fff;
  padding: .125rem .25rem;
  display: flex;
  flex-direction: column;
}



.chart1 {
  flex: 1;
}

::v-deep .el-descriptions__header {
  margin-bottom: 0 !important;
}

.table {
  flex: 1;
  padding: .125rem 0;
}

.des_title {
  font-size: .2125rem;
}

.mukuai {
  display: flex;
  flex-direction: column;
  height: 5rem;
  padding: .125rem .25rem;
  background-color: #fff;
}

.ul_style {
  padding: .125rem 0;
}

.notice {
  border-bottom: 1px solid #ccc;
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: .1rem 0;
  cursor: pointer;
  align-items: center;
}

.left {
  flex: 2;
}

.left .row {
  display: flex;
  align-items: center;
}

.notice:hover span {
  color: #3370ff;
}

.yuan {
  width: .125rem;
  height: .125rem;
  border-radius: 50%;
  display: inline-block;
  background-color: #e5e5e5;
}
.qus{
  padding: .125rem 0;
}
</style>
